/**
 * CommonSearch组件用法：
 * 组件引用方法：import XXX from '@/pages/Dashboard/common/Search';
 * 参数：
 * {array} props.btns 按钮组数组
 * {ReactComponent} props.exterComponent 额外的组件 - 比如链码调用技术文档
 * {string} props.searchPlaceHolder 搜索组件的placeholder
 * {function} props.searchFn 搜索按钮函数
 * {function} props.onChangeSearchValue 更改搜索值
 */

import React, { Component } from 'react'
import { Button, Input } from 'antd'
import searchSvg from '@/images/org/search.svg'
import './index.less'

const { Search } = Input
const CommonSearch = (props) => {
  return (
    <div className={props.btns && props.btns.length ? 'common-quorum-header-search' : 'common-quorum-header-search search-right'}>
      <div className="search-left">
        {
          props.btns && props.btns.length
            ? <div className="btn-list">
              {
                props.btns.map(item => {
                  return (
                    <Button className={item.className} key={item.key} onClick={() => item.clickFn()} type={item.type}>{item.text}</Button>
                  )
                })
              }

            </div> : null
        }
        {
          props.exterComponent
            ? props.exterComponent : null
        }
      </div>

      <div className="search">
        <div className="search-btn">
          <img src={searchSvg} alt="" onClick={() => props.searchFn()} />
        </div>
        <input
          className="search-input"
          placeholder={props.searchPlaceHolder}
          type="text"
          onKeyDown={(event) =>
            event.keyCode == 13 && props.searchFn()
          }
          id="input"
          autoComplete="off"
          onChange={(e) => props.onChangeSearchValue(e)}

        />

      </div>
    </div>

  )
}

export default CommonSearch
